<html>
	<head>
		<meta charset="utf-8">
		<title>Razdavalnik</title>
		<link rel="shortcut icon" href="shopping.icon">
		<link rel="stylesheet" href="css/bootstrap.min.css" >
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
		<script>
			
		
		/*
		$.get("http://localhost:8080/TestAJAX/ajaxServlet?name="+$("#name").val(), function(data) {
				$("#result").html( data );
			}	
		);*/
		function sendRequest() {
		alert('vlezna');
		alert($("#password").val());
		$.post("http://localhost:8080/Prodavalnik/LoginServlet", {'name':$("#username").val(), 'password':$("#password").val()});
		}

		</script>
	</head>
	<body>
<!-- Navigation Bar -->
	<div class="navbar navbar-inverse navbar-static-top">
        <div class="container -fluid">
			<div class = "navbar-header-inverse">
				<button style="font-family:Gentium Basic;" type="button" class="btn navbar-brand navbar-btn" data-toggle="collapse" data-target=".navbar-collapse" onclick="location.href='page1.html'">
				  <span class="icon-bar"></span>
				  <span class="icon-bar"></span>
				  <span class="icon-bar"></span>
				  <font color="#428bca">Razdavalnik</font> 
				</button>	
			</div>			 
			 
			  <!-- LOG IN and Register -->
			  <!-- LOG IN and Register -->
			  <!-- LOG IN and Register -->
			 <!-- LOG IN and Register -->
			<div class = "navbar-collapse collapse" >
				<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a class="dropdown-toggle" href="#" data-toggle="dropdown" >
								Log In 
								<strong class="caret">
								</strong>
							</a>
							<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
								<form class="navbar-form form-inline" method="post"   >
									<input style="margin-bottom: 15px;" class="username" type="text" placeholder="Username" id="username" name="username">
									<input style="margin-bottom: 15px;" class="password" type="password" placeholder="Password" id="password" name="password">
									<input style="float: left; margin-right: 10px;" type="checkbox" name="remember-me" id="remember-me" value="1">
									<label class="string optional" for="user_remember_me"> Remember me</label>
									<input class="btn btn-primary btn-block" type="button" id="sign-in"  value="Sign In" onclick="sendRequest()" />
								</form>
							</div>
						</li>
						<li><a data-toggle="modal" data-target="#myModal">
							<span class="glyphicon glyphicon-user"></span> Sign Up</a>
						</li>
				</ul>
			</div>	
		</div>
    </div>

	<!-- Modal Dialogue Window When you click Register -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h1 class="modal-title text-center" id="myModalLabel">Registration</h1>
				</div>
					<div class="modal-body">
							 <!-- Username input-->
						<div class="control-group text-center">
								<label class="control-label" for="textinput"><font color="#d9534f;">User name:*</font></label>
								<div class="controls">
								  <input id="text" name="textinput" type="text" placeholder="" class="input-medium">
								</div>
								<br/>
						  <!-- Password input-->
							<label class="control-label" for="passwordinput"><font color="#d9534f;">Password:*</font></label>
							<div class="controls">
							  <input id="password" name="passwordinput" type="password" placeholder="password" class="input-medium">
							  <span class="help-block"><font color="#d9534f;">*The password must have at least 8 characters, at least 1 digit(s), at least 1 lower case letter(s), 
							  at least 1 upper case letter(s), at least 1 non-alphanumeric character(s)
							  </font></span>
							</div>
						  <!-- Address input-->
							<label class="control-label" for="textinput">Address:</label>
							<div class="controls">
							  <input id="text" name="textinput" type="text" placeholder="" class="input-medium">
							</div>
							<br/>
						  <!-- Phone input-->
							<label class="control-label" for="textinput">Phone Number:</label>
							<div class="controls">
							  <input id="text" name="textinput" type="tel" placeholder="+359" class="input-medium">
							</div>
							<br/>
						  <!-- Email input-->
							<label class="control-label" for="textinput"><font color="#d9534f;">E-mail:*</font></label>
							<div class="controls">
							  <input id="text" name="textinput" type="email" placeholder="" class="input-medium">
							</div>
						</div>
						<br/>
						<div class="modal-footer">
							<button id="submit" name="singlebutton" type="submit" class="btn btn-success">Submit</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					    </div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Container with Info column and Slide show -->
	<div class = "container-fluid">
		<div class="row">
			<div class="col-md-12">
					<!--- Left column -->
					<div class="col-md-3" >
					  <!-- Left column -->
					  <a href="#"><strong><i class="glyphicon glyphicon-wrench"></i> Categories</strong></a>  
					  <hr>
					  <ul class="list-unstyled">
						<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#userMenu" class="collapsed">
						  <h5>Fashion <i class="glyphicon glyphicon-chevron-down"></i></h5>
						  </a>
							<ul class="list-unstyled collapse" id="userMenu" style="height: 0px;">
								<li class="active"> <a href="#"></i> Women's</a></li>
								<li><a href="#"> Men's</a></li>
								<li><a href="#"> Handbags & Accessories</a></li>
								<li><a href="#"> Shoes</a></li>
								<li><a href="#"> Jewelry & Watches</a></li>

							</ul>
						</li>
						<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#menu2" class="collapsed">
						  <h5>Electronics <i class="glyphicon glyphicon-chevron-down"></i></h5>
						  </a>
						
							<ul class="list-unstyled collapse" id="menu2" style="height: 0px;">
								<li><a href="#">Smartphones</a>
								</li>
								<li><a href="#">Cameras</a>
								</li>
								<li><a href="#">Computers & Tablets</a>
								</li>
								<li><a href="#">Car Auto,Video & GPS</a>
								</li>
								<li><a href="#">TV & Auto</a>
								</li>
							</ul>
						</li>
						<li class="nav-header"> <a href="#" data-toggle="collapse" data-target="#menu3" class="collapsed">
							  <h5>Auto <i class="glyphicon glyphicon-chevron-down"></i></h5>
							  </a>
								<ul class="list-unstyled collapse" id="menu3" style="height: 0px;">
									<li><a href="#"> Cars & Trucks </a></li>
									<li><a href="#"> Motorcycles</a></li>
									<li><a href="#"> Other Vehicles & Trailers </a></li>
									<li><a href="#">Parts & Accessories </a></li>
									<li><a href="#"> Automotive Tools & Supplies</a></li>
								</ul>
						</li>	
						<li class="nav-header">
						<a href="#" data-toggle="collapse" data-target="#menu4" class="collapsed">
						  <h5>Home & Garden <i class="glyphicon glyphicon-chevron-down"></i></h5>
						  </a>
						
							<ul class="list-unstyled collapse" id="menu4" style="height: 0px;">
								<li><a href="#"> Furniture</a></li>
								<li><a href="#"> Kitchen, Dining & Bar</a></li>
								<li><a href="#"> Lamps, Lighting & Ceiling Fans</a></li>
								<li><a href="#"> Tools</a></li>
								<li><a href="#"> Yard,Garden & Outdoor Living</a></li>
							</ul>
						</li>
					  </ul>
						   
					  <hr>
					  
					  <a href="#"><strong><i class="glyphicon glyphicon-link"></i> Resources</strong></a>  
					  
					  <hr>
					  
					  <ul class="nav nav-pills nav-stacked">
						<li class="nav-header"></li>
						<li><a href="#"><i class="glyphicon glyphicon-list"></i> Layouts &amp; Templates</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-briefcase"></i> Toolbox</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-link"></i> Widgets</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> Reports</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-book"></i> Pages</a></li>
						<li><a href="#"><i class="glyphicon glyphicon-star"></i> Social Media</a></li>
					  </ul>

					</div>
					
					
					
					<!-- Slide Show column -->
				<div class="col-md-6" >
						<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						  <!-- Indicators -->
						  <ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						  </ol>

						  <!-- Wrapper for slides -->
						  <div class="carousel-inner" role="listbox">
							<div class="item active">
							  <img src="img/black friday 1.jpg" alt="...">
							  <div class="carousel-caption">
								...
							  </div>
							</div>
							<div class="item">
							  <img src="img/black friday 2.jpg" alt="...">
							  <div class="carousel-caption">
								...
							  </div>
							</div>
							<div class="item">
							  <img src="img/sale.jpg" alt="...">
							  <div class="carousel-caption">
								...
							  </div>
							</div>
							
						  </div>

						  <!-- Controls -->
						  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						  </a>
						  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						  </a>
						</div>
				</div>	
			</div>
			
		</div>
	</div>
	
	
<!-- Custom Thumbnail -->
					<div class = "container">
						<div class = "row">
							<div class = "col-md-6">
								<h1>Catalogue</h1><hr>
							</div>
						</div>
						<div class = "row">
							<div class = "col-md-3">
								<div class = "thumbnail">
									<img src="img\Catalogue\fashion.jpg" />
									<div class = "caption">
										<h3>Fashion</h3>
											<button class = "btn btn-info">View</button>
									</div>
								</div>
							</div>	
							<div class = "col-md-3">
								<div class = "thumbnail">
									<img src="img\Catalogue\electronics.jpg" />
									<div class = "caption">
										<h3>Electronics </h3>
											<button class = "btn btn-info">View</button>
									</div>
								</div>
							</div>
							<div class = "col-md-3">
								<div class = "thumbnail">
									<img src="img\Catalogue\auto.jpg" />
									<div class = "caption">
										<h3>Auto</h3>
											<button class = "btn btn-info">View</button>
									</div>
								</div>
							</div>
							<div class = "col-md-3">
								<div class = "thumbnail">
									<img src="img\Catalogue\H&G.jpg" />
									<div class = "caption">
										<h3>House & Garden</h3>
											<button class = "btn btn-info">View</button>
									</div>
								</div>
							</div>
						</div>
					</div>
		
		
			
	
	<!--- FOOOOTER-->
		<footer>
        <div class="row">
          <div class="col-md-10">
            <ul class="list-unstyled">
              <li class="pull-right"><a href="#top"><h3>Back to top <span class ="glyphicon glyphicon-chevron-up"></span></h3></a></li>
            </ul>
          </div>
        </div>
      </footer>
  <script src="lib/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
	</body>
</html>